<template>
  <view class="content">
    <view
      style="
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 600rpx;
        position: relative;
        background: linear-gradient(to right bottom, #1ba5fb, #2b73fd);
        z-index: 1;
      "
    >
      <view style="width: 100%; margin-top: 100rpx; margin-left: 40rpx">
        <image
          style="width: 24rpx; height: 38rpx"
          src="@/static/image/back.png"
          @click="back"
        />
      </view>
      <view class="top-logo">
        <image
          src="@/static/image/logo.png"
          style="width: 100%; height: 100%"
        />
      </view>
      <text class="info">临沂市农村产权交易平台</text>
    </view>
    <view class="login-form" v-if="statu == '1'">
      <view class="form-item">
        <view class="form-item-top"> 用户名 </view>
        <view class="form-item-bottom">
          <uni-easyinput
            placeholder="请输入手机号"
            :inputBorder="false"
            v-model="loginInfo.userName"
            :clearable="false"
          ></uni-easyinput>
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-top"> 密码 </view>
        <view class="form-item-bottom">
          <uni-easyinput
            placeholder="请输入密码"
            :inputBorder="false"
            :clearable="false"
            v-model="loginInfo.userPass"
            type="password"
          ></uni-easyinput>
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-top"> 验证码 </view>
        <view class="form-item-bottom" >
          <uni-easyinput
            placeholder="请输入图形验证码"
            :inputBorder="false"
            :clearable="false"
            v-model="loginInfo.code"
          ></uni-easyinput>
          <view style="height: 60rpx; width: 200rpx" @click="getCode()"
            ><image style="height: 60rpx; width: 200rpx" :src="code"></image
          ></view>
        </view>
      </view>
      <!-- <view class="wangji" @click="chongzhi(3)"> 忘记密码? </view> -->
    </view>
    <view class="login-form" v-if="statu == '2'">
      <!-- <view class="form-item">
        <view class="form-item-top"> 单位或个人名称· </view>
        <view class="form-item-bottom">
          <uni-easyinput
            placeholder="请输入单位或个人名称"
            :inputBorder="false"
            :clearable="false"
          ></uni-easyinput>
        </view>
      </view> -->
      <view class="form-item">
        <view class="form-item-top"> 手机号码 </view>
        <view class="form-item-bottom">
          <uni-easyinput
            placeholder="请输入手机号码"
            :inputBorder="false"
            v-model="regInfo.userName"
            :clearable="false"
          ></uni-easyinput>
        </view>
      </view>
      <!-- <view class="form-item">
        <view class="form-item-top"> 短信验证码 </view>
        <view class="form-item-bottom">
          <uni-easyinput
            placeholder="请输入短信验证码"
            :inputBorder="false"
            :clearable="false"
          ></uni-easyinput>
          <view style="height: 60rpx; width: 200rpx; border: 1px solid black"
            >短信验证码</view
          >
        </view>
      </view> -->
      <view class="form-item">
        <view class="form-item-top"> 密码 </view>
        <view class="form-item-bottom">
          <uni-easyinput
            placeholder="请输入密码"
            :inputBorder="false"
            v-model="regInfo.userPass"
            :clearable="false"
            type="password"
          ></uni-easyinput>
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-top"> 再次输入 </view>
        <view class="form-item-bottom">
          <uni-easyinput
            placeholder="请再次输入密码"
            :inputBorder="false"
            :clearable="false"
            v-model="regInfo.userPasss"
            type="password"
          ></uni-easyinput>
        </view>
      </view>
	  <view class="form-item">
	    <view class="form-item-top"> 验证码 </view>
	    <view class="form-item-bottom" >
	      <uni-easyinput
	        placeholder="请输入图形验证码"
	        :inputBorder="false"
	        :clearable="false"
	        v-model="regInfo.code"
	      ></uni-easyinput>
	      <view style="height: 60rpx; width: 200rpx" @click="getCode()"
	        ><image style="height: 60rpx; width: 200rpx" :src="code"></image
	      ></view>
	    </view>
	  </view>
    </view>
    <view class="login-form" v-if="statu == '3'">
      <view class="form-item">
        <view class="form-item-top"> 用户名 </view>
        <view class="form-item-bottom">
          <uni-easyinput
            placeholder="请输入用户名"
            :inputBorder="false"
			v-model="resetInfo.userName"
            :clearable="false"
          ></uni-easyinput>
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-top"> 旧密码 </view>
        <view class="form-item-bottom">
          <uni-easyinput
            placeholder="请输入旧密码"
            :inputBorder="false"
			v-model="resetInfo.oldPassword"
            :clearable="false"
			type="password"
          ></uni-easyinput>
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-top"> 新密码 </view>
        <view class="form-item-bottom">
          <uni-easyinput
            placeholder="请输入密码"
            :inputBorder="false"
			v-model="resetInfo.newPassword"
            :clearable="false"
            type="password"
          ></uni-easyinput>
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-top"> 再次输入 </view>
        <view class="form-item-bottom">
          <uni-easyinput
            placeholder="请再次输入密码"
            :inputBorder="false"
			v-model="resetInfo.newPasswordAgain"
            :clearable="false"
            type="password"
          ></uni-easyinput>
        </view>
      </view>
    </view>
    <view class="foot-button">
      <view
        style="
          width: 692rpx;
          height: 84rpx;
          margin-top: 20rpx;
          background-color: #136bff;
          border-radius: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 17px;
        "
        @click="statu == '1' ? login() : statu == '2' ? register() : changePassNew()"
        >{{
          statu == "1" ? "登 录" : statu == "2" ? "注册账号" : "修改密码"
        }}</view
      >
    </view>
    <view
      @click="chongzhi(2)"
      style="color: #b2b2b2; margin-top: 28rpx; font-size: 14px"
      v-show="statu == '1'"
      >没有账号？<text style="color: #136bff">注册账号</text></view>
    <view
      @click="chongzhi(1)"
      style="color: #b2b2b2; margin-top: 28rpx; font-size: 14px"
      v-show="statu == '2'"
      >已有账号？<text style="color: #136bff">登 录</text></view>
    
	  <view v-show="statu == '3'" style="width: 90%; margin:0 auto; font-size: 12px; color:red;">
	    <view>注意：</view>
	    <view>1、系统检测您的密码已长时间未更新，为保障您的帐号安全，请先修改密码后再继续操作。</view>
	    <view>2、新密码必须以大写字母开头，且包含小写字母、数字和特殊字符，且位数需要8至20位。</view>
	  </view>
	
  </view>
</template>

<script>
import { login } from "@/utils/api.js";
import { aes_encrypt, aes_decrypt } from "@/utils/aes.js";
import Cookies from 'js-cookie'
export default {
  data() {
    return {
      statu: "1",
      loginInfo: {},
      regInfo: {},
	  resetInfo:{},
      code: "",
    };
  },
  onLoad() {
    this.getCode();
  },
  methods: {
    async getCode() {
      let res = await login.getCode();
      // console.log(res);
      this.code = res.data.img;
      this.loginInfo.uuid = res.data.uuid;
	  this.regInfo.uuid = res.data.uuid;
    },
    async login() {
      let data = {
        userName: this.loginInfo.userName,
        userPass: aes_encrypt(this.loginInfo.userPass),
        code: this.loginInfo.code,
        uuid: this.loginInfo.uuid,
      };
      let res = await login.login(data);
      console.log(res);
     
	  if(res.code == 1050){
		  uni.showToast({
		    title: "密码强度不够！密码格式为：开头必须是大写字母，且必须包含小写字母+特殊字符+数字组成，密码长度为8~20位！",
		    icon: "none",
		    duration: 3000,
		  });
		  this.statu = 3
		  this.resetInfo.userName = this.loginInfo.userName;
		   this.getCode();
	  }
      else if (res.code == 1000) {
        Cookies.set("token", res.data.token);
        uni.setStorageSync("userInfo", res.data.userInfo);
        uni.showToast({
          title: "登录成功",
          icon: "none",
          duration: 2000,
        });
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        uni.showToast({
          title: res.message,
          icon: "none",
          duration: 2000,
        });
		 this.getCode();
      }
    },
    async register() {
      if (this.regInfo.userPass != this.regInfo.userPasss) {
        uni.showToast({
          title: "两次密码不一致",
          icon: "none",
          duration: 2000,
        });
      } else {
        let data = {
          userName: this.regInfo.userName,
          userPass: aes_encrypt(this.regInfo.userPass),
		  code: this.regInfo.code,
		  uuid: this.regInfo.uuid,
        };
        let res = await login.register(data);
		if(res.code == 1050){
			uni.showToast({
			  title: "密码强度不够！密码格式为：开头必须是大写字母，且必须包含小写字母+特殊字符+数字组成，密码长度为8~20位！",
			  icon: "none",
			  duration: 3000,
			});
			 this.getCode();
		}else if (res.code == 1000) {
          uni.showToast({
            title: "注册成功",
            icon: "none",
            duration: 2000,
          });
          this.statu = 1;
          this.loginInfo.userName = data.userName;
          this.loginInfo.userPass = this.regInfo.userPass;
		   this.getCode();
        } else {
          uni.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
          });
		   this.getCode();
        }
      }
    },
	async changePassNew(){
		if (this.resetInfo.newPassword != this.resetInfo.newPasswordAgain) {
		  uni.showToast({
		    title: "两次密码不一致",
		    icon: "none",
		    duration: 2000,
		  });
		} else {
		  let data = {
		    userName: this.resetInfo.userName,
		    oldPassword: aes_encrypt(this.resetInfo.oldPassword),
			newPassword: aes_encrypt(this.resetInfo.newPassword),
		  };
		  let res = await login.resetPassNew(data);
				if(res.code == 1050){
					uni.showToast({
					  title: "密码强度不够！密码格式为：开头必须是大写字母，且必须包含小写字母+特殊字符+数字组成，密码长度为8~20位！",
					  icon: "none",
					  duration: 3000,
					});
				}else if (res.code == 1000) {
		    uni.showToast({
		      title: "修改密码成功,跳转登录页",
		      icon: "none",
		      duration: 2000,
		    });
		    this.statu = 1;
			 this.getCode();
		  } else {
		    uni.showToast({
		      title: res.message,
		      icon: "none",
		      duration: 2000,
		    });
		  }
		}	  
	},
    chongzhi(e) {
      this.statu = e;
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped lang="less">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  .top-logo {
    width: 176rpx;
    height: 176rpx;
    margin-top: 34rpx;
  }
  .info {
    margin-top: 40rpx;
    font-size: 22px;
    font-weight: 600;
  }
  .login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40rpx;
    border-radius: 40rpx;
    margin-top: -100rpx;
    background-color: white;
    z-index: 2;
    .form-item {
      width: 538rpx;
      margin-bottom: 20rpx;
      border-bottom: 1px solid #f1f1f1;
      .form-item-top {
        font-weight: 600;
      }
      .form-item-bottom {
        margin-top: 10rpx;
        padding-bottom: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        input {
          height: 60rpx;
        }
      }
    }
    .wangji {
      width: 538rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      color: #b2b2b2;
      font-size: 14px;
    }
  }
  .reg-form {
    margin-top: 40rpx;
    width: 538rpx;
    .form-item {
      width: 100%;
      margin-bottom: 20rpx;
      border-bottom: 1px solid #f1f1f1;
      .form-item-top {
        font-weight: 600;
      }
      .form-item-bottom {
        margin-top: 10rpx;
        padding-bottom: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        input {
          height: 60rpx;
        }
      }
    }
  }
  .foot-button {
    width: 90%;
    margin-bottom: 20rpx;
	display: flex;
	justify-content: center;
    button {
      margin-top: 20rpx;
      border-radius: 20rpx;
      border: 1px solid black;
    }
  }
}
</style>
